import React from 'react';


import classnames from 'classnames';
//component
import ReTextField from 'components/widgets/ReTextField';
import ReIcon from 'components/widgets/ReIcon';
import { Spin } from 'antd';
import request from 'core/request.js';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            List: [],
            total: 0,
            searchLoading: false,
            searchUser: '',
            showSearchFlag: false,
            currentPage: 1,
            // currentType : null,
        }
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    authorNameFocus() {
        const {List} = this.state;
        this.setState({showSearchFlag: true});
        // if (List.length > 0) {
        //     return;
        // }
        if(this.props.typeHasChange){
            this.setState({currentPage:1, searchUser: '',},function () {
                this.search(this.state.currentPage);
                console.log(this.state.currentPage)
            });
        }else{
            this.search()
        }
    }

    searchUserOnChange(v) {
        this.setState({searchUser: v});
    }

    closeHandle() {
        this.setState({searchUser: '',currentPage:1},function () {
            this.search(this.state.currentPage);
        });
    }

    closeSearchWrapper() {
        this.setState({showSearchFlag: false});
    }


    search(current) {
        this.setState({searchLoading: true, currentPage: current ? current : this.state.currentPage});
        const {searchUser} = this.state;
        let cPage = current ? current : this.state.currentPage;
        console.log('this.props.type',this.props.type)
        request({
            url: (this.props.type === 3 || this.props.type === 4) ? $$.api('getUsers') : $$.api('getExhibitionList'),
            method:(this.props.type === 3 || this.props.type === 4) ? 'post' : 'get',
            data: {
                pageNumber: cPage, pageSize: 20,
                searchCriteria:searchUser ? searchUser : null,
                key:searchUser ? searchUser : null,
            }
        }).then(res => {
            if(this.props.type === 3 || this.props.type === 4){
                if (cPage > 1) {
                    this.setState({List: [...this.state.List, ...res.data.userList]});
                } else {
                    this.setState({List: res.data.userList || []});
                }
                this.setState({searchLoading: false, total: res.data.resultTotalNumber});
            }else{
                if (cPage > 1) {
                    this.setState({List: [...this.state.List, ...res.data.artShowList]});
                } else {
                    this.setState({List: res.data.artShowList || []});
                }
                this.setState({searchLoading: false, total: res.data.total});
            }
        }).catch(err => {
            this.setState({searchLoading: false});
        });
    }

    itemClick(e, item, onChange) {
        e.preventDefault();
        this.setState({showSearchFlag: false});
        (this.props.type === 3 || this.props.type === 4) ? onChange(item.nickName, item.id) : onChange(item.name,item.id);
    }
    nameInput(e) {
        if (e.which === 13) {
            this.search();
        }
    }

    bottomScroll(e, ref) {
        if (ref.scrollTop + ref.clientHeight >= ref.scrollHeight && this.state.List.length < this.state.total) {
            this.search(this.state.currentPage + 1);
        }
    }

    render() {
        const {iValue, placeHolder, onChange, className,type} = this.props;
        const {searchLoading, List, searchUser, showSearchFlag} = this.state;
        let classname = 'orin-s-authorselect-root ' + className;
        return (
            <div className={classname}>
                <ReTextField
                    isLabel={false}
                    type="text"
                    className="input-wrapper"
                    notfullWidth={false}
                    readOnly={true}
                    onChange={(e, v) => onChange(v)}
                    onFocus={(e, v) => this.authorNameFocus(v)}
                    maxLength="20"
                    value={iValue}
                    placeholder={placeHolder}/>
                {
                    showSearchFlag &&
                    <div className="search-user-wrapper">
                        <div className="search-user-top">
                            <ReTextField
                                isLabel={false}
                                type="text"
                                className="search-user-input"
                                notfullWidth={false}
                                onChange={(e, v) => this.searchUserOnChange(v)}
                                value={searchUser}
                                searchIcon={true}
                                searchHandler={() => this.search()}
                                closeIcon={true}
                                closeHandler={() => this.closeHandle()}
                                onKeyDown={(e) => this.nameInput(e)}
                                placeholder={(type === 3 || type === 4) ? '搜索用户名称或手机号' : '搜索画展名称'}/>
                            <span className="search-user-span"
                                  onClick={(e) => this.closeSearchWrapper(e)}>
                                <ReIcon icon="window_closes"/>
                            </span>
                        </div>
                        <div className="search-user-bottom">
                            <ul className="bottom-ul" ref="bottomUl"
                                onScroll={(e) => this.bottomScroll(e, this.refs.bottomUl)}>
                                {
                                    List && List.map((item,index) => {
                                        return (
                                            <li key={index} onClick={(e) => this.itemClick(e, item, onChange)}
                                                className="bottom-li">
                                                <p className="li-name">
                                                    <span>{(type === 3 || type === 4) ? item.nickName : item.name}</span>
                                                </p>
                                                {
                                                    (type === 3 || type === 4) &&
                                                    <p className="li-phone">{item.phone}</p>
                                                }
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <Spin spinning={searchLoading} size="large"/>
                            {
                                !searchLoading && List.length === 0 &&
                                <p className="has-no-artist">
                                    暂无搜索结果
                                </p>
                            }
                        </div>
                    </div>
                }
            </div>
        );
    }
}
